use leptos::{ev, prelude::*, task::spawn_local};
use leptos_use::{use_toggle, UseToggleReturn};
use thaw::*;

use crate::tauri::{close, isMaximized, is_tauri_env, minimize, toggleMaximize};

#[component]
pub fn TitleBar(children: Children) -> impl IntoView {
    let theme = use_context::<RwSignal<Theme>>();
    let class = move || {
        let Some(theme) = theme else {
            return "flex justify-end items-center bg-gray-50 h-[25px] w-full".to_string();
        };
        let mut color = "bg-gray-50";
        if theme.get().name.eq("dark") {
            color = "bg-gray-500";
        }
        format!("flex justify-end items-center {color} h-[25px] w-full")
    };
    view! {
        <div
            data-tauri-drag-region
            class = class
        >
            {children()}
            <JerseyMinMaxClose />
        </div>
    }
}

#[component]
pub fn JerseyMinMaxClose() -> impl IntoView {
    let theme = use_context::<RwSignal<Theme>>();
    let UseToggleReturn {toggle, value, ..} = use_toggle(true);
    Effect::new(move || {
        if value.get() {
            let Some(theme) = theme else {
                return;
            };
            theme.set(Theme::light());
        } else {
            let Some(theme) = theme else {
                return;
            };
            theme.set(Theme::dark());
        }
    });

    if !is_tauri_env() {
        return view! {
            <div
                on:click=move |_| toggle()
                class="h-full w-[40px] flex justify-center items-center hover:bg-gray-200"
            >
                <Icon icon=icondata::VsJersey />
            </div>
        }.into_any();
    }
    let (is_maximized, set_is_maximized) = signal(false);
    let resize_listener = window_event_listener(ev::resize, move |_| {
        spawn_local(async move { set_is_maximized.set(isMaximized().await.as_bool().unwrap_or(false)); });
    });
    on_cleanup(move || {
        resize_listener.remove();
    });
    let icondata = Memo::new(move |_| {
        if is_maximized.get() { icondata::VsChromeRestore } else { icondata::VsChromeMaximize }
    });
    spawn_local(
        async move { set_is_maximized.set(isMaximized().await.as_bool().unwrap_or(false)); }
    );
    
    view! {
        <div
            on:click=move |_| toggle()
            class="h-full w-[40px] flex justify-center items-center hover:bg-gray-200"
        >
            <Icon icon=icondata::VsJersey />
        </div>
        <div
            on:click=move |_| {
                spawn_local(async move { minimize().await });
            }
            class="h-full w-[40px] flex justify-center items-center hover:bg-gray-200"
        >
            <Icon icon=icondata::VsChromeMinimize />
        </div>
        <div
            on:click=move |_| {
                spawn_local(async move { toggleMaximize().await });
            }
            class="h-full w-[40px] flex justify-center items-center hover:bg-gray-200"
        >
            <Icon icon=icondata />
        </div>
        <div
            on:click=move |_| {
                spawn_local(async move { close().await });
            }
            class="h-full w-[40px] flex justify-center items-center hover:bg-red-500"
        >
            <Icon icon=icondata::VsChromeClose />
        </div>
    }
    .into_any()
}
